// 同步服务端状态代办事项
import { useTodos } from '../hooks/todos'
import TodosItem from './TodoItem'

function TodosMain () {
  const { isLoading, isError, error, data } = useTodos()
  if (isLoading) return <div>正在加载服务端默认代办事项</div>
  if (isError) return <div>{error.message}</div>

  return (
    <section className='main'>
      <input className='toggle-all' type='checkbox' />
      <ul className='todo-list'>
        {data.map(todo => (
          <TodosItem key={todo.id} todo={todo} />
        ))}
      </ul>
    </section>
  )
}

export default TodosMain
